<template>
	<view id="activity">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" top="10" bottom="0" @down="downCallback" @up="upCallback">
			<view class="activityList" v-for="(item,index) in list" :key="index" @click='goDetails(item.id)'>
				<image :src="item.cover"/>
				<view class="activeMsg">
					<view class="name">{{item.title}}</view>
					<view>{{item.activate_time}}</view>
					<view class="state" >{{item.status_name}}</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list:[]
			}
		},
		methods: {
			upCallback(page) {
				this.httpClient.post('agents/app/activity/index', {
					pageNum:page.num,
					pageSize:page.size
				}).then(res => {
					this.mescroll.endByPage(res.rows.length, res.total);
					if (page.num == 1) this.list = [];
					this.list = this.list.concat(res.rows);
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'activityDetail?id='+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#activity{
		.activityList {
		
		    margin: 0 1rem 1rem;
		
		    font-size: 0.9rem;
		
		    background: #fff;
		
		    border-radius: 5px;
		
		    background: #fff;
		
		}
		
		.activityList image {
		
		    display: inline-block;
		
		    height: 7rem;
		    
		    width: 100%;
		
		    border-radius: 5px;
		
		}
		
		.activeMsg {
		
		    padding-left: 0.75rem;
		
		    position: relative;
		
		    line-height: 1.5rem;
		
		}
		
		.state {
		
		    position: absolute;
		
		    right: 0;
		
		    top: 0.8rem;
		
		    font-size: 0.6rem;
		
		    background: #f5b53a;
		
		    padding: 0 1rem;
		
		    display: inline-block;
		
		    line-height: 1.2rem;
		
		    border-top-left-radius: 0.5rem;
		
		    border-bottom-left-radius: 0.5rem;
		
		    color: #fff;
		
		}
	}
</style>
